<template>
  <div id="commission">
    <c-title :text="text"></c-title>
    <header class="header">
      <div class="header-info">
        <img class="img" :src="info.avatar_image" alt="">
        <span class="name">{{info.nickname}}</span>
      </div>
    </header>
    <div class="content">
      <div class="item">
        <div>{{info.expect_commission}}</div>
        <div>预计佣金</div>
      </div>
      <div class="item">
        <div>{{info.unsettle_commission	}}</div>
        <div>未结算</div>
      </div>
      <div class="item">
        <div>{{info.settle_commission}}</div>
        <div>已结算</div>
      </div>
      <div class="item">
        <div>{{info.close_commission}}</div>
        <div>无效</div>
      </div>
      <div class="item">
        <div>{{info.invalid_commission}}</div>
        <div>失效</div>
      </div>
    </div>
    <div class="h8"></div>
    <van-tabs v-model="active" @change="change">
      <van-tab title="预计佣金" name="0"></van-tab>
      <van-tab title="未结算" name="1"></van-tab>
      <van-tab title="已结算" name="3"></van-tab>
      <van-tab title="无效" name="-1"></van-tab>
      <van-tab title="失效" name="-2"></van-tab>
    </van-tabs>
    <div class="list">

      <div class="box" v-for="item in list" :key="item.order_sn">
        <div class="left">
          <p class='m-b-7'>{{item.order_sn}}</p>
          <p>{{item.create_time_str}}</p>
        </div>
        <div class="right">
          <template v-if="active == -2">
            <p class="m-b-7">失效{{item.invalid_commission}}</p>
          </template>
          <template v-else>
            <p class="m-b-7">+{{item.commission}}</p>
            <p>消费探币-{{item.sub_amount}}</p>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {scrollMixin} from "utils/mixin.js"
export default {
  mixins:[scrollMixin],
  data() {
    return {
      isLoadMore:true,
      text: '',
      active: 0,
      current_page:1,
      last_page:1,
      list:[],
      info: {
        expect_commission: 0,
        unsettle_commission: 0,
        settle_commission: 0,
        close_commission: 0,
        invalid_commission: 0,
        nickname: '',
        avatar_image: ''
      }
    }
  },
  activated() {
    this.getData();
    this.getList()
  },
  methods: {
    change(){
      this.getList()
    },
    getMoreData(){
      this.isLoadMore=false;
      if(this.current_page>=this.last_page){
        return
      }else{
        let page = this.current_page + 1;
        $http.post("plugin.commission-point.frontend.index.list",{page,status:this.active}).then(res => {
          if(res.result){
            this.list = this.list.concat(res.data.data);
            this.current_page = res.data.current_page;
          }
        })
      }
    },
    getList(){
      $http.post("plugin.commission-point.frontend.index.list",{status:this.active}).then(res => {
        if(res.result){
          this.list = res.data.data || [];
          this.last_page = res.data.last_page
        }
      })
    },
    getData() {
      $http.get("plugin.commission-point.frontend.index.index").then(res => {
        if (res.result == 1) {
          let { expect_commission, unsettle_commission, settle_commission, close_commission, invalid_commission, member: { nickname, avatar_image } } = res.data;
          this.info.expect_commission = expect_commission;
          this.info.unsettle_commission = unsettle_commission;
          this.info.settle_commission = settle_commission;
          this.info.close_commission = close_commission
          this.info.invalid_commission = invalid_commission;
          this.info.nickname = nickname;
          this.info.avatar_image = avatar_image;
          this.text = res.data.plugin_name || '分销消费探币';
          this.fun.setWXTitle(res.data.plugin_name || '分销消费探币');
        } else {
          this.$toast(res.msg)
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
#commission {
  background-color: #fff;

  .m-b-7 {
    margin-bottom: 0.4375rem;
  }

  .box {
    display: flex;
    justify-content: space-between;
    padding: 1.125rem 1.1875rem 1.1875rem 1rem;
    border-bottom: 1px solid #e8e8e8;
    font-size: 0.75rem;
  }

  .left {
    text-align: left;
  }

  .right {
    text-align: right;
  }

  .h8 {
    height: 0.5rem;
    background-color: #f5f5f5;
  }

  .content {
    display: flex;
    flex-wrap: wrap;
    background-color: #fff;
    padding-bottom: 1.1875rem;
  }

  .item {
    width: 33%;
    margin-top: 1.5rem;
  }

  .name {
    color: #fff;
    margin-left: 0.9375rem;
  }

  .header {
    background-color: #ff5b5b;
    text-align: left;

    .header-info {
      display: flex;
      align-items: flex-start;
      padding-left: 1.0625rem;
      padding-top: 0.75rem;
      padding-bottom: 13px;
    }

    .img {
      width: 3.125rem;
      height: 3.125rem;
      border-radius: 100px;
      margin: 0;
    }
  }
}
</style>